<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model="formInline.goods_name"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="formInline.user_name"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          align="center"
          :index="indexMethod"
          label="序号"
          width="70"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="logo"
          align="center"
          label="商家信息"
          width="280"
        >
          <template slot-scope="scope">
            <div class="modality">
              <el-image
                style="width: 70px; height: 70px"
                :src="'https://bjsf.bjsky.top/' + scope.row.logo"
                class="leftImg"
              ></el-image>
              <div class="modalityUser">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.company_name"
                  placement="top-start"
                >
                  <span class="text"
                    >商家名称:{{ scope.row.company_name }}</span
                  >
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="name" align="center" label="商品名称">
        </el-table-column>
        <el-table-column
          prop="store_manager_name"
          align="center"
          label="商品规格"
        >
          <template slot-scope="scope">
            长{{ scope.row.length }}，宽{{ scope.row.width }}，高{{
              scope.row.height
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="img" align="center" label="员工头像">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.img"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column> -->
        <el-table-column prop="sell_price" align="center" label="商品单价">
        </el-table-column>
        <el-table-column prop="cou" align="center" label="评价次数">
          <!-- <template slot-scope="scope">
            {{ scope.row.seller.comments }}
          </template> -->
        </el-table-column>
        <el-table-column prop="sum_point" align="center" label="评价分">
          <!-- <template slot-scope="scope">
            {{ scope.row.seller.comprehensive_score }}
          </template> -->
        </el-table-column>
        <el-table-column prop="sum_quality_score" align="center" label="品质分">
          <!-- <template slot-scope="scope">
            {{ scope.row.seller.quality_score }}
          </template> -->
        </el-table-column>
        <el-table-column prop="sum_service_score" align="center" label="服务分">
          <!-- <template slot-scope="scope">
            {{ scope.row.seller.service_score }}
          </template> -->
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[50, 100, 200, 300]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="particulars"
      width="60%"
      :before-close="handleClose"
    >
      <el-tabs
        type="border-card"
        v-model="activeName"
        @tab-click="tabssevaluate"
      >
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <!--<el-tab-pane label="好评" name="1"></el-tab-pane>
        <el-tab-pane label="差评" name="2"></el-tab-pane>-->
        <div class="commen">
          <div
            class="itemBox"
            v-for="(item, index) in evaluateData"
            :key="index"
          >
            <p style="margin-bottom: 4px">用户名:{{ item.user.nickname }}</p>
            <p style="margin-bottom: 4px">评价时间:{{ item.create_time }}</p>
            <div class="haoPing">
              <div>
                好评
                <el-rate
                  v-model="item.point"
                  disabled
                  show-score
                  text-color="#ff9900"
                  class="star"
                >
                </el-rate>
              </div>
              <div>
                品质
                <el-rate
                  v-model="item.quality_score"
                  disabled
                  show-score
                  text-color="#ff9900"
                  class="star"
                >
                </el-rate>
              </div>
              <div>
                服务
                <el-rate
                  v-model="item.service_score"
                  disabled
                  show-score
                  text-color="#ff9900"
                  class="star"
                >
                </el-rate>
              </div>
            </div>
            <div class="reply">
              <p>评价内容：</p>
              <div class="contents">
                <p>
                  {{ item.contents }}
                </p>
                <div class="photo">
                  <el-image
                    v-for="(item2, index2) in item.img_list.split(',')"
                    :key="index2"
                    style="width: 100px; height: 100px"
                    :src="imgHeader + item2"
                    class="leftImg"
                  ></el-image>
                </div>
                <div class="reply" v-if="item.reply">
                  <p>回复记录：</p>
                  <div class="contents">
                    <!-- <span class="username"
                      >用户名：{{ ite.user.nickname }}</span
                    >
                    <span>{{ item.create_time }}</span>
                    <p class="contentText">
                      {{ item.contents }}
                    </p> -->
                    <span class="username"
                      >商家名称：{{ item.seller.shop_name }}</span
                    >
                    <span>{{ item.reply_time }}</span>
                    <p>
                      {{ item.reply }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="reply" v-show="item.lookIndex">
              <p>回复内容:</p>
              <div class="replyBox">
                <textarea
                  name=""
                  id=""
                  cols="70"
                  rows="5"
                  v-model="contents"
                ></textarea>
                <div class="replyBtn">
                  <el-button type="warning" @click="handleCancel(index)"
                    >取消</el-button
                  >
                  <el-button
                    type="success"
                    @click="handleSend(index, item.id, item.user_id)"
                    >发送</el-button
                  >
                </div>
              </div>
            </div>
            <div class="btnBox">
              <el-button type="danger" @click="handelDel(item.id)"
                >删除此条评论</el-button
              >
              <el-button
                type="primary"
                @click="handleReplay(index)"
                v-if="!item.reply"
                >回复</el-button
              >
            </div>
          </div>
        </div>
      </el-tabs>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="pinglunVisible"
      width="30%"
      :before-close="handlePinglunClose"
    >
      <span>确定删除评论？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlePinglunClose">取 消</el-button>
        <el-button type="primary" @click="deletes">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { pingList, evalList, deleteEvaluate } from "../../../../utils/api";
import {
  getFuEvaluateList,
  getFuEvaluateDetail,
  getReply,
  getEvaluateDel,
} from "../../../../utils/main";
export default {
  data() {
    return {
      obj_id: "",
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      particulars: false,
      innerVisible: false,
      formInline: {
        goods_name: "",
        user_name: "",
      },
      imgHeader: this.Global.imgHeader,
      tableData: [],
      partiData: [],
      parameter: {},
      detailsData: {},
      evaluateData: [],
      evaluteNum: "",
      total: 0,
      limit: 10,
      page: 1,
      total2: 0,
      limit2: 10,
      page2: 1,
      value1: 3,
      value2: 3.7,
      value3: 5,
      estatus: "",
      activeName: "0",
      pinglunVisible: false,
      deleteId: -1,
      lookIndex: false,
      // _name: "",
      manager_name: "",
      manager_phone: "",
      store_name: "",
      seller_id: sessionStorage.getItem("seller_id"),
      // seller_id: 6,
      id: "1",
      contents: "",
      user_id: "30",
      goods_name: "",
      user_name: "",
      goods_id: "",
    };
  },
  methods: {
    // 回复按钮的点击事件
    handleReplay(index) {
      this.evaluateData.forEach((item) => {
        item.lookIndex = false;
      });
      this.evaluateData[index].lookIndex = true;
      this.evaluateData = [...this.evaluateData];
      this.getListDetail();
      // console.log(this.evaluateData, "2222")
      // console.log(this.evaluateData[index].lookIndex, "33");
    },
    // 取消回复的点击事件
    handleCancel(index) {
      this.evaluateData.forEach((item) => {
        item.lookIndex = false;
      });
      this.evaluateData[index].lookIndex = false;
      this.evaluateData = [...this.evaluateData];
      this.contents = "";
    },
    // 发送回复的点击事件
    handleSend(index, id, user_id) {
      getReply(this.token, id, user_id, this.contents).then((res) => {
        // if (res.data.status) {
        //   this.pinglunVisible = false;
        //   this.pingLists(this.obj_id);
        //   this.$message({
        //     message: "删除成功",
        //     type: "success",
        //   });
        // }
      });
      this.evaluateData.forEach((item) => {
        item.lookIndex = false;
      });
      this.evaluateData[index].lookIndex = false;
      this.evaluateData = [...this.evaluateData];
      this.contents = "";
    },
    openpinglunVisible(row) {
      this.pinglunVisible = true;
      this.deleteId = row.id;
    },
    handlePinglunClose() {
      this.deleteId = -1;
      this.pinglunVisible = false;
    },
    deletes() {
      deleteEvaluate(this.token, this.deleteId).then((res) => {
        if (res.data.status) {
          this.pinglunVisible = false;
          this.pingLists(this.obj_id);
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }
      });
    },
    tabssevaluate(tab, event) {
      if (tab.index == 0) {
        this.estatus = "";
      }
      if (tab.index == 1) {
        this.estatus = 1;
      }
      if (tab.index == 2) {
        this.estatus = 2;
      }
      this.pingLists(this.obj_id);
    },
    //查询
    onSubmit() {
      this.goods_name = this.formInline.goods_name;
      this.user_name = this.formInline.user_name;
      this.page = 1;
      this.evalLists();
    },
    // 重置
    onReset() {
      this.goods_name = "";
      this.user_name = "";
      this.formInline.goods_name = "";
      this.formInline.user_name = "";
      this.evalLists();
    },
    //详情
    handleEdit(row) {
      this.goods_id = row.goods_id;
      this.particulars = true;
      this.getListDetail();
    },
    //序号
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    indexOd(index) {
      if (this.total2 < this.limit2) {
        return this.total2 - index;
      } else {
        return this.total2 - (this.page2 - 1) * this.limit2 - index;
      }
    },
    //关闭
    handleClose(done) {
      done();
      this.page2 = 1;
      this.evalLists();
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      this.evalLists();
    },
    //页数
    handleCurrentChange(val) {
      this.page = val;
      this.evalLists();
    },
    //条数
    handleSizeChange2(val) {
      this.limit2 = val;
      this.pingLists(this.obj_id);
    },
    //页数
    handleCurrentChange2(val) {
      this.page2 = val;
      this.pingLists(this.obj_id);
    },
    // 详情
    getListDetail() {
      this.loading = true;
      getFuEvaluateDetail(this.token, this.seller_id, this.goods_id)
        .then((res) => {
          if (res.data.status) {
            this.evaluateData = res.data.data;
            // console.log(this.evaluateData);
            // this.evaluteNum = res.data.data.count;
            // let date;
            // let y, m, d, hh, mm, ss;
            // this.partiData.forEach((item) => {
            //   date = new Date(item.ctime * 1000);
            //   y = date.getFullYear();
            //   m = date.getMonth() + 1;
            //   d = date.getDate();
            //   hh = date.getHours();
            //   mm = date.getMinutes();
            //   ss = date.getSeconds();
            //   m = m > 10 ? m : "0" + m;
            //   d = d > 10 ? d : "0" + d;
            //   hh = hh > 10 ? hh : "0" + hh;
            //   mm = mm > 10 ? mm : "0" + mm;
            //   ss = ss > 10 ? ss : "0" + ss;
            //   item.ctime_text =
            //     y + "-" + m + "-" + d + " " + hh + ":" + mm + ":" + ss;
            //   if (item.status == 1) {
            //     item.status_text = "好评";
            //   }
            //   if (item.status == 0) {
            //     item.status_text = "差评";
            //   }
            // });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/materilsLogin");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    //评价列表
    evalLists() {
      this.loading = true;
      // this._name = "";
      getFuEvaluateList(
        this.token,
        this.seller_id,
        this.goods_name,
        this.user_name,
        this.page,
        this.limit
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData = res.data.data || [];
            this.total = res.data.count;
            this.tableData.forEach((item) => {
              if (item.avatar) {
                item.image = item.avatar;
                item.img = this.imgHeader + item.avatar;
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/materilsLogin");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    handelDel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(row.id);
          getEvaluateDel(this.token, id).then((res) => {
            if (res.data.status) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getListDetail();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.evalLists();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

/* .DivFor {
  border: 1px solid #c1bfbf;
  padding: 20px 20px;
  margin-top: 20px;
} */

.item {
  margin-bottom: 18px;
}

.margin-top {
  margin-top: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.modality {
  display: flex;
  width: 100%;
}

.modality .leftImg {
  width: 20%;
}

.modalityUser {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 15px;
  width: 70%;
}

.modalityUser .item {
  display: block;
  text-align: left;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.contents {
  /* margin-bottom: 10px; */
  /* margin-top: 5px; */
  border: 1px solid rgb(172, 171, 171);
  width: 85%;
  padding: 10px;
}

.commen {
  padding-bottom: 10px;
  border-bottom: 1px solid #eeeeee;
}
.reply {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  margin-top: 5px;
}
.username {
  margin-right: 50px;
}
.btnBox {
  display: flex;
  justify-content: center;
  padding: 5px;
}
/* .replyBox {
  border-bottom: 1px solid #c1bfbf;
} */
.replyBtn {
  display: flex;
  justify-content: end;
}
.contentText {
  margin-bottom: 10px;
}
textarea {
  padding: 10px;
  margin-left: 5px;
  display: block;
  margin-bottom: 10px;
}
.photo {
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
  padding: 10px;
  flex-wrap: wrap;
}
/* .photo img {
  width: 100px;
  height: 100px;
  border: 1px solid black;
} */
.star {
  display: inline-block;
}
.itemBox {
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0dfdf;
}
</style>